<template>
	<div class="w100 h100 flex-col position-relative">
		<three class="three" />
		<div class="left f1 h0 flex-col h100 p-t-26 p-l-10 p-b-10">
			<my-box class="m-b-10 h0" style="flex-grow: 2" title="带班人员">
				<div class="flex-col w100 h100 overflow-y-auto">
					<div class="take_person p-l-10 p-r-10 b-r-2 flex m-between" v-for="(item, index) in takePerson" :key="index">
						<div style="line-height: 32px">
							<img src="@/assets/img/rd/arrowRight.png" alt="" />
							<span class="name m-l-5">{{ item.leaderName }}</span>
						</div>
						<div class="" style="line-height: 32px">
							<span class="name">{{ item.leaderPhone }}</span>
							<img class="m-l-5" style="vertical-align: middle" src="@/assets/img/rd/phone.png" alt="" />
						</div>
					</div>
				</div>
			</my-box>
			<my-box class="h0 m-b-10" style="flex-grow: 4" title="设备运行状态">
				<template #right>
					<div class="flex">
						<div class="operation flex">
							<div></div>
							<span>工频运行</span>
						</div>
						<div class="stop flex">
							<div></div>
							<span>正常停机</span>
						</div>
					</div>
				</template>
				<template #default>
					<my-table
						:data="equipmentList"
						:columns="[
							{
								label: '皮带',
								prop: 'beltName',
								width: 110,
								align: 'center'
							},
							{
								label: '运行状态',
								prop: 'normalRunningTime',
								align: 'center'
							},
							{
								label: '当前速度',
								prop: 'speed',
								align: 'center',
								width: 90
							}
						]"
					>
						<template #normalRunningTime="{ row }">
							<div class="flex">
								<el-progress
									:style="{ width: `${((row.normalRunningTime * 100) / (row.normalRunningTime + row.stopRunningTime)).toFixed(2)}%` }"
									color="#3AB973"
									:stroke-width="4"
									:percentage="100"
									:show-text="false"
								/>
								<el-progress
									:style="{
										width: `${100 - ((row.normalRunningTime * 100) / (row.normalRunningTime + row.stopRunningTime)).toFixed(2)}%`,
										'margin-left': '3px'
									}"
									color="#45A5FF"
									:stroke-width="4"
									:percentage="100"
									:show-text="false"
								/>
							</div>
						</template>
						<template #speed="{ row }"> {{ row.speed }}m/s </template>
					</my-table>
				</template>
			</my-box>
			<my-box class="h0" style="flex-grow: 4" title="皮带运行情况">
				<template #default>
					<my-table
						:data="beltRunningInfoList"
						:columns="[
							{
								label: '皮带',
								prop: 'beltName',
								width: 110,
								align: 'center'
							},
							{
								label: '运行状态',
								prop: 'runningState',
								align: 'center'
							},
							{
								label: '	煤量',
								prop: 'coalCount',
								align: 'center'
							},
							{
								label: '当前速度',
								prop: 'speed',
								align: 'center',
								width: 90
							},
							{
								label: '运行时间',
								prop: 'runningTimeCount',
								align: 'center',
								width: 90
							},
							{
								label: '烟雾',
								prop: 'smokeState',
								align: 'center',
								width: 90
							},
							{
								label: '堆煤',
								prop: 'coalState',
								align: 'center',
								width: 90
							},
							{
								label: '温度',
								prop: 'temperatureState',
								align: 'center',
								width: 90
							},
							{
								label: '纵撕',
								prop: 'tearState',
								align: 'center',
								width: 90
							},
							{
								label: '机头跑偏',
								prop: 'machineHead',
								align: 'center',
								width: 90
							},
							{
								label: '机尾跑偏',
								prop: 'machineTail',
								align: 'center',
								width: 90
							}
						]"
					>
						<template #runningState="{ row }"> {{ ['停止', '运行'][row.runningState] }} </template>
						<template #speed="{ row }"> {{ row.speed }}m/s </template>
					</my-table>
				</template>
			</my-box>
		</div>
	</div>
</template>

<script setup name="comprehensive/transportation">
import { transitionGroupRef } from '@u/util'
import { leaderInfo, runningState, beltRunningInfo } from '@a/transportation'
import three from './3d/transportation.vue'

// 带班人员数据
let takePerson = ref([])
leaderInfo().then((res) => {
	takePerson.value = res.data
})

// 设备运行状态
let equipmentList = ref([])
runningState().then((res) => {
	equipmentList.value = res.data
})

// 皮带运行情况
let beltRunningInfoList = ref([])
beltRunningInfo().then((res) => {
	beltRunningInfoList.value = res.data
})
</script>

<style lang="scss" scoped>
.left {
	width: 400px;
	position: relative;
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0.6) 67%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
}
//带班人员样式
.take_person {
	margin-top: 10px;
	height: 32px;
	font-size: 14px;
	background: rgba(62, 99, 176, 0.2);
	cursor: pointer;
	.name {
		color: #fff;
	}
	.captain {
		color: #fff;
	}
}
.take_person:nth-child(1) {
	margin: 0;
}
//设备运行状态样式
.operation,
.stop {
	justify-content: center;
	align-items: center;
	div {
		margin-left: 5px;
		width: 12px;
		height: 12px;
		opacity: 1;
		box-sizing: border-box;
		border: 3px solid #3ab973;
		border-radius: 50%;
	}
	span {
		margin-left: 5px;
		font-size: 12px;
		color: rgb(130, 135, 144);
	}
}
.stop {
	div {
		border: 3px solid #397bfd;
	}
}
.title {
	border-radius: 2px;
	background: rgba(62, 99, 176, 0.2);
	span {
		display: inline-block;
		font-size: 14px;
		color: #fff;
	}
}
.belt,
.belt1 {
	display: inline-block;
	margin-right: 5px;
	text-align: left;
	width: 80px;
	font-size: 13px;
	color: #fff;
}
.belt1 {
	margin-left: 5px;
	text-align: right;
}
</style>
